<template>
    <div>
        <!-- 头部 -->
        <div class="top-banner">
            <img src="../../assets/images/haha1.png"/>
        </div>
        <!-- 注册 -->
         <div class="title-line">
            <span>注册</span>
        </div>


        <div style="padding-top:60px">
            <div class="plate" style="margin-top: 80px; width: 500px; height: 500px; margin:0 auto">
                <div style="margin-bottom: 40px; " >
                    <el-input v-model="name" placeholder="昵称"></el-input>
                    <!-- <p class="error-message user-name-error"></p> -->
                </div>


                <div style="margin-bottom: 40px;">
                    <el-input placeholder="密码（6-16个字符组成，区分大小写）" v-model="password" show-password></el-input>
                </div>
                <div style="margin-bottom:40px;">
                    <el-input placeholder="填写常用手机号" v-model="input3" class="input-with-select" type="text" >
                            <el-select v-model="select" slot="prepend" placeholder="请选择">
                                <el-option label="餐厅名" value="1"></el-option>
                                <el-option label="订单号" value="2"></el-option>
                                <el-option label="用户电话" value="3"></el-option>
                            </el-select>
                    </el-input>
                </div>
                <div >
                    <el-input placeholder="请输入短信验证码" v-model="input2">
                        <template slot="append">
                            <el-row>
                                <el-button type="primary" round @click="getCode">点击获取</el-button>
                            </el-row>
                        </template>
                    </el-input>
                </div>
                <div style="width:500px;padding:10px 0;font-size:12px">
                        <label class="register-agree">
                            <label class="check-box checkbox-bwxr active">
                                <input name="agree" type="checkbox" :checked='isChecked' @click='changeChecked()'>
                            </label>
                            我已同意<a target="_blank" href="//www.bilibili.com/protocal/licence.html">《哔哩哔哩弹幕网用户使用协议》</a>
                            和<a target="_blank" href="//www.bilibili.com/blackboard/help.html#%E8%B4%A6%E5%8F%B7%E7%9B%B8%E5%85%B3">《哔哩哔哩弹幕网账号中心规范》</a>
                        </label>
                    </div>
                    <div class="margin">
                        <div class="border">
                            <el-row>
                              <router-link to="/login">
                             <el-button :disabled='!isChecked' type="primary" style="height:40px;width:500px" @click="register">
                               注册 </el-button></router-link>
                             </el-row>
                        </div>
                        
                    </div>
                    <div class="mail-input">
                        <!-- <a href="Login/index.vue">已有账号，直接登陆&gt;</a> -->
                        <router-link to="/login">已有账号，直接登陆&gt;</router-link>
                    </div> 
            </div>
        </div>
        

    </div>
</template>

<script>


export default {
  name: 'Register',
  data(){
      return{
          name:'',
          password:"",
          isChecked:false,
          select: '',
          input2:'',
          input3:'',
           
         
      }
  },


  methods:{
        changeChecked(){
            localStorage.setItem('userinfo',JSON.stringify({name:this.name,password:this.password}))
            this.isChecked=!this.isChecked
        },

    //   验证码
        getCode(){
            this.$store.dispatch('getCode',this.input3)
        },


        async register(){
            let {input,password,input2,input3} = this
            if(input&&password&&input2&&input3 === password){
                this.$store.dispatch('userRegister',{})
            }
        },
  }

}
</script>

<style>


.top-banner {
  background: khaki;
  height: 86px;
  text-align: center;
  margin-bottom: 20px;
}
.title-line {
  width: 800px;
  height: 28px;
  border-bottom: 1px solid cornflowerblue;
  display: block;
  margin: 0 auto 40px;
  position: relative;
}
.title-line span {
  height: 56px;
  line-height: 56px;
  margin: 0 auto;
  padding: 0 20px;
  font-size: 38px;
  background-color: #a6baf0;
  text-align: center;
  display: inline-block;
  position: absolute;
  left: 300px;
  right: 300px;
}
.el-select .el-input {
  width: 130px;
}
/* // .plate{
//     text-align: center;

// } */
.mail-input {
  width: 500px;
  height: 40px;
  line-height: 40px;
  text-align: right;
}
.register-container {
  width: 980px;
  height: 400px;
  margin: 0 auto;
  padding: 60px 0;
}
.register-container .registerForm {
  width: 100%;
}
.register-container .registerForm .report-wrap-module div {
  width: 420px;
  height: 40px;
  margin: 0 auto;
  font-size: 12px;
  position: relative;
}
.register-container .registerForm .report-wrap-module div .report-wrap-module .border {
  width: 388px;
  height: 38px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  color: #606266;
  display: inline-block;
  padding: 0 15px;
  line-height: 38px;
}
.register-container .registerForm .report-wrap-module div .error-message {
  color: #f45d90;
  position: absolute;
  right: -20px;
  top: 12px;
  transform: translate3d(100%, 0, 0);
  font-size: 12px;
}
.register-container .registerForm .safe_window {
  display: none;
  width: 415px;
  box-sizing: border-box;
  padding: 10px 0;
}
.register-container .registerForm .safe_window .safe_window p {
  width: 60px;
  height: 20px;
  line-height: 20px;
  font-size: 15px;
  font-weight: bolder;
  float: left;
}
.register-container .registerForm .safe_window .safe_window .a_pw {
  width: 360px;
  height: 22px;
  float: left;
  font-weight: bolder;
}
.register-container .registerForm .safe_window .safe_window .a_pw .safe_line {
  width: 30px;
  height: 5px;
  border-radius: 5px;
  margin-left: 15px;
  margin-top: 7px;
  margin-right: 10px;
  float: left;
}
.register-container .registerForm .border .el-input__inner {
  border: 0;
  width: 78px;
  height: 38px;
  padding-right: 35px;
  background: url(../../assets/images/icons.png) no-repeat -384px -140px;
}
.register-container .registerForm .selectCity input {
  float: left;
}
.register-container .registerForm .selectCity .phone {
  border: 0;
  width: 226px;
  height: 38px;
  padding: 0 15px;
  border-left: 1px solid #dcdfe6;
}
.register-container .registerForm .mail-input {
  width: 500px;
  height: 40px;
  line-height: 40px;
  text-align: right;
}
.register-container .registerForm .mess-container {
  position: relative;
}
.register-container .registerForm .mess-container button {
  position: absolute;
  width: 120px;
  height: 34px;
  line-height: 34px;
  font-size: 14px;
  border-radius: 4px;
  color: #fff;
  background-color: #00a1d6;
  border: 1px solid #00a1d6;
  top: 3px;
  right: 0;
}
.register-container .registerForm .register-agree {
  font-size: 12px;
  display: block;
  padding: 10px 0;
  cursor: pointer;
}
.register-container .registerForm .register-agree .check-box {
  vertical-align: middle;
  margin-bottom: 3px;
  display: inline-block;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: 50%;
  cursor: pointer;
}
.register-container .registerForm .register-agree .check-box .report-wrap-module a {
  color: #00a1d6;
}
.register-container .registerForm .report-wrap-module .margin {
  width: 420px;
  height: 40px;
  border-radius: 4px;
}
.register-container .registerForm .report-wrap-module .margin .report-wrap-module .margin .border {
  padding: 0;
  width: 420px;
  height: 40px;
}
.register-container .registerForm .report-wrap-module .margin .report-wrap-module .margin .border .regBtn {
  border: 0;
  width: 100%;
  height: 100%;
  outline: none;
  color: rgba(0, 0, 0, 0.25);
  background: #f5f5f5;
  font-size: 14px;/* cursor: url("../../static/images/disabled.ico"), auto; */
}
.register-container .registerForm .report-wrap-module .margin .border .regBtn.active {
  background: #00a1d6;
  color: #fff;
  cursor: pointer;
}

    

</style>